<template>
    <div class="m-popover__tooltip" :class="clazz" :style="comStyle">
      
       <div class="m-popover__tooltipbg" :class="clazz" ref="tooltipbgRef">
            <slot />
        <div class="m-popover__arrowwrap">
             <div class="m-popover__arrow"></div>
        </div>
       </div>
        
    </div>
</template>



<script lang="ts" setup>
import { useClickAway } from '@vant/use';
import { computed, PropType, ref } from 'vue'
import type { PopoverPlacement } from "./types";


const tooltipbgRef = ref()

const props = defineProps({
      placement: {
      type: String as PropType<PopoverPlacement>,
      default: "top",
    },
     width:{
       type: [Number,String],
      default: ''
    }
})

const emits = defineEmits([
    'clickout'
])

const clazz = computed(()=>{
    return [
        `is-${props.placement}`
    ]
})

const comStyle = computed(()=>{
 
    if(props.width){
        return {
            width:`${props.width}px`
        }
    }else {
        return {}
    }
})



</script>